<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型基础学习</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 基础样式 */
        .box {
            width: 580px;
            height: 100px;
            background-color: lightblue;
            margin: 20px;
            padding: 20px;
            border: 2px solid black;
        }

        .box2 {
            width: 580px;
            height: 100px;
            background-color: lightgreen;
            margin: 20px;
            padding: 10px 20px 30px 40px;
            border: 3px dashed orange;
        }

        /* 添加不同边框样式的示例 */
        .border-examples div {
            width: 580px;
            height: 60px;
            margin: 20px;
            padding: 10px;
            background-color: #f0f0f0;
        }

        .solid-border {
            border: 2px solid #333;
        }

        .dashed-border {
            border: 2px dashed #666;
        }

        .dotted-border {
            border: 2px dotted #999;
        }

        .double-border {
            border: 2px double #ccc;
        }

        .rounded-border {
            border: 2px solid #f0f0f0;
            border-radius: 5px;
        }

        .content-box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            border: 5px solid #3498db;
            box-sizing: content-box;
                      /* 添加文本溢出处理 */
                      overflow: hidden;      /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: nowrap;   /* 防止文本换行 */
        }

        .border-box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            border: 5px solid #3498db;
            box-sizing: border-box;
        }

        .node {
            margin: 10px 20px;

        }

    </style>
</head>
<body>
    <div class="box">
        这个盒子有相同的内边距，文字不会紧贴边缘，现在还有了黑色实线边框
    </div>

    <div class="box2">
        这个盒子的四个方向有不同的内边距，现在有了橙色虚线边框
    </div>

    <div class="border-examples">
        <div class="solid-border">实线边框</div>
        <div class="dashed-border">虚线边框</div>
        <div class="dotted-border">点线边框</div>
        <div class="double-border">双线边框</div>
        <div class="rounded-border">圆角边框</div>
    </div>

    <div class="note">
        <h2>两种盒模型的区别：</h2>
    </div>

    <div class="content-box">
        标准盒模型 (content-box)<br>
        实际宽度 = 200px + (20px × 2) + (5px × 2) = 250px

daffffffffadsdfasffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

        daff 
    </div>

    <div class="border-box">
        IE盒模型 (border-box)<br>
        实际宽度 = 200px（包含内边距和边框）
    </div>
</body>
</html>